<template>
  <div id="material">
    <top-header/>
    <div class="material-basic">
      <div class="material-basic-title">
        <img alt="" src="@/assets/images/submit-material-basic.png">
        <span>应急周转申请</span>
      </div>
    </div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <div class="material-basic-content">
        <div class="material-basic-content-title"><span>柳州市中小工业企业应急周转资金申请书</span></div>
        <!--第1个div-->
        <div class="material-basic-content-list">
          <div class="material-basic-content-list-one">
            <dl>
              <dd>申请单位&nbsp;<span></span></dd>
              <dd style="margin: .4rem 0">法人代表 &nbsp;<span></span></dd>
              <dd>申请日期&nbsp;<span>{{ getDate }}</span></dd>
            </dl>
          </div>
        </div>
        <!--第2个div-->
        <div class="material-basic-content-list">
          <!--借款信息-->
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="material-basic-content-list-title">借款信息</div>
            </el-col>
          </el-row>
          <!--申请企业名称-->
          <el-row :gutter="20">
            <el-col :span="16">
              <div>申请企业名称</div>
            </el-col>
            <el-col :span="3">
              <div>营业执照号</div>
            </el-col>
            <el-col :span="5">
              <div>
                <el-form-item prop="name">
                  <input type="text" v-model="ruleForm.name">
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <!--办理联系人-->
          <el-row :gutter="20">
            <el-col :span="4">
              <div>办理联系人</div>
            </el-col>
            <el-col :span="4">
              <div>
                <input type="text">
              </div>
            </el-col>
            <el-col :span="2">
              <div style="text-align: center">职务</div>
            </el-col>
            <el-col :span="6">
              <div>
                <input type="text">
              </div>
            </el-col>
            <el-col :span="3">
              <div>联系人</div>
            </el-col>
            <el-col :span="5">
              <div><input type="text"></div>
            </el-col>
          </el-row>
          <!--申报企业类型-->
          <el-row :gutter="20">
            <el-col :span="4">
              <div>申报企业类型</div>
            </el-col>
            <el-col :span="12">
              <div><input type="text"></div>
            </el-col>
            <el-col :span="8">
              <div></div>
            </el-col>
          </el-row>
          <!--申请金额-->
          <el-row :gutter="20">
            <el-col :span="4">
              <div>申请金额</div>
            </el-col>
            <el-col :span="12">
              <div><input type="text"></div>
            </el-col>
            <el-col :span="8">
              <div></div>
            </el-col>
          </el-row>
        </div>
        <!--第3个div-->
        <div class="material-basic-content-list">
          <!--企业基本概况-->
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="material-basic-content-list-title">企业基本概况</div>
            </el-col>
          </el-row>
          <!--法人代表-->
          <el-row :gutter="20">
            <el-col :span="16">
              <div>法人代表</div>
            </el-col>
            <el-col :span="3">
              <div>实际控制人</div>
            </el-col>
            <el-col :span="5">
              <div><input type="text"></div>
            </el-col>
          </el-row>
          <!--成立时间-->
          <el-row :gutter="20">
            <el-col :span="4">
              <div>成立时间</div>
            </el-col>
            <el-col :span="12">
              <div><input type="text"></div>
            </el-col>
            <el-col :span="3">
              <div>所属行业</div>
            </el-col>
            <el-col :span="5">
              <div><input type="text"></div>
            </el-col>
          </el-row>
          <!--注册地址-->
          <el-row :gutter="20">
            <el-col :span="4">
              <div>注册地址</div>
            </el-col>
            <el-col :span="12">
              <div><input type="text"></div>
            </el-col>
            <el-col :span="4">
              <div>所属城（县）区</div>
            </el-col>
            <el-col :span="4">
              <div><input type="text"></div>
            </el-col>
          </el-row>
          <!--经营地址-->
          <el-row :gutter="20">
            <el-col :span="4">
              <div>经营地址</div>
            </el-col>
            <el-col :span="12">
              <div><input type="text"></div>
            </el-col>
            <el-col :span="8">
              <div></div>
            </el-col>
          </el-row>
          <!--员工人数-->
          <el-row :gutter="20">
            <el-col :span="4">
              <div>员工人数</div>
            </el-col>
            <el-col :span="12">
              <div><input type="text"></div>
            </el-col>
            <el-col :span="3">
              <div>贷款卡号</div>
            </el-col>
            <el-col :span="5">
              <div><input type="text"></div>
            </el-col>
          </el-row>
          <!--基本开户行-->
          <el-row :gutter="20">
            <el-col :span="4">
              <div>基本开户行</div>
            </el-col>
            <el-col :span="12">
              <div><input type="text"></div>
            </el-col>
            <el-col :span="8">
              <div></div>
            </el-col>
          </el-row>
          <!--经营范围-->
          <el-row :gutter="20">
            <el-col :span="4">
              <div>经营范围</div>
            </el-col>
            <el-col :span="12">
              <div><input type="text"></div>
            </el-col>
            <el-col :span="8">
              <div></div>
            </el-col>
          </el-row>
          <!--主要产品及业务-->
          <el-row :gutter="20">
            <el-col :span="4">
              <div>主要产品及业务</div>
            </el-col>
            <el-col :span="20">
              <div><input type="text"></div>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row :gutter="20">
            <el-col :span="24">
              <div style="text-align: right">
                <el-button>提交</el-button>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" >
            <el-col :span="24">
              <div style="text-align: center;margin-bottom: 5%">
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

    </el-form>
  </div>
</template>
<script>
import TopHeader from "@/components/header/header";

export default {
  name: "submitMaterialBasic",
  components: {TopHeader},
  data() {
    return {
      input: '',
      getDate: '', // 当前日期
      list: {
        name: '柳州城市职业学院',
        name1: '刘经理',
      },
      options: [{
        value: '选项1',
        label: '新客户'
      }, {
        value: '选项2',
        label: '原应急周转客户'
      }],
      value: '',
      ruleForm: {
        name: '',
      },
      rules: {
        name: [
          {required: true, message: '请输入营业执照号', trigger: 'blur'},
          {min: 11, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        region: [
          {required: true, message: '请选择活动区域', trigger: 'change'}
        ],
        date1: [
          {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
        ],
        date2: [
          {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
        ],
        type: [
          {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
        ],
        resource: [
          {required: true, message: '请选择活动资源', trigger: 'change'}
        ],
        desc: [
          {required: true, message: '请填写活动形式', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    getNowDate() {//获取当前日期
      let yy = new Date().getFullYear(); // 获取年份
      let mm = new Date().getMonth() + 1; // 获取月份
      let dd = new Date().getDate(); // 获取日期
      let hh = new Date().getHours(); // 获取小时
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes(); // 获取分
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds(); // 获取秒
      this.getDate = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss; // 拼接时间
      this.getDate = yy + '/' + mm + '/' + dd; // 拼接时间
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created() {
    this.getNowDate()
  }
}

</script>

<style scoped src="./test.css">

</style>
